<script setup>
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { ref } from 'vue'

const $route = useRoute()
const $router = useRouter()
const id = $route.query.id
const videoInfo = ref({
  material: {
    category: {}
  }
})

const getVideoDetails = async () => {
  try {
    const res = await api.get('ip/videoDetails', {
      params: {
        video_id: id
      },
    })
    var info = res.data
    info.statusText = ''
    if (info.status==0) {
      info.statusText = '待剪辑'
    } else if (info.status==1) {
      info.statusText = '待生成剪辑后视频'
    } else if (info.status==2) {
      info.statusText = '完成'
    }
    videoInfo.value = res.data
  } catch (error) {
    console.error(error)
  }
}
getVideoDetails()
</script>

<template>
  <div>
    <van-cell-group>
      <van-field
        type="textarea"
        v-model="videoInfo.material.title"
        label="素材名称"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />
      <van-field
        type="textarea"
        v-model="videoInfo.material.category.name"
        label="素材分类"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />
      <van-field
        type="textarea"
        v-model="videoInfo.material.content"
        label="素材内容"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />
      <van-field
        type="textarea"
        v-model="videoInfo.clip_need"
        label="剪辑需求"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />
      <van-field
        center
        readonly
        :border="false"
        label="背景图片"
      />
      <van-cell>
        <img class="w100" :src="videoInfo.image" alt="">
      </van-cell>

      <van-field
        center
        readonly
        :border="false"
        label="原视频"
      />
      <van-cell>
        <video controls width="100%" :src="videoInfo.url"></video>
      </van-cell>

      <van-field
        type="textarea"
        v-model="videoInfo.submit_time"
        label="提交时间"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />

      <van-field
        center
        readonly
        :border="false"
        label="回传视频"
      />
      <van-cell>
        <video controls width="100%" :src="videoInfo.clip_url"></video>
      </van-cell>

      <van-field
        type="textarea"
        v-model="videoInfo.clip_time"
        label="回传时间"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />

      <van-field
        type="textarea"
        v-model="videoInfo.statusText"
        label="状态"
        placeholder=""
        rows="1"
        autosize
        :readonly="true"
      />
    </van-cell-group>
  </div>
</template>

<style scoped>
.w100 {
  width: 100%;
}
</style>